<template>
  <div class="app-container">
    <el-form
      ref="queryParams"
      :model="queryParams"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="活动创建时间">
        <el-date-picker
          v-model="timeValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动分类">
         <el-select v-model="queryParams.activityClassification" clearable>
            <el-option
              v-for="i in activityOptions"
              :key="i.createTime"
              :value="i.dictValue"
              :label="i.dictLabel"
            ></el-option>
          </el-select>
         </el-form-item>
      <el-form-item label="活动名称">
        <el-input
          v-model="queryParams.activityName"
          placeholder="请输入活动名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleSearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="createTime" label="活动创建时间"></el-table-column>
      <el-table-column label="活动类目">
        <template slot-scope="scope">
          <span>{{ activityClassName(scope.row.activityClassification) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="activityName" label="活动名称"> </el-table-column>
      <el-table-column
        prop="activeDescribe"
        label="申报描述"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="rewardPoints" label="申报积分"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleProcess(scope.row)"
            >申报活动</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="活动资料信息填报"
      :visible.sync="dialogHandleProcess"
      width="800px"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.activityName"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="活动类目" :label-width="formLabelWidth">
          <el-input
            autocomplete="off"
            v-model="form.activityClassification"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="活动时间" :label-width="formLabelWidth" prop="activeJoinTime">
            <el-date-picker
        v-model="form.activeJoinTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择活动时间">
      </el-date-picker>
        </el-form-item>
        <el-form-item
          label="申报描述"
          :label-width="formLabelWidth"
          prop="declarationDescribe"
        >
          <el-input
            v-model="form.declarationDescribe"
            autocomplete="off"
            type="textarea"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          label="申报附件"
          :label-width="formLabelWidth"
          prop="fileList"
        >
          <FileUpload
            ref="child"
            :fileType="fileType"
            :fileSize="20"
            :limit="10"
            @input="fileList"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogHandleProcess = false">取消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { integralApplyApi } from "@/api/party/integral";
import { getActivityApi } from "@/api/party/activity";
import { listData } from "@/api/system/dict/data";
export default {
  data() {
    var checkFile = (rule, value, callback) => {
      if (!this.form.filePath) {
        return callback(new Error("请上传申报附件！"));
      }
      callback();
    };
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      fileType: [
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "pptx",
        "pdf",
        "jpg",
        "jpeg",
        "png",
      ],
      formLabelWidth: "120px",
      dialogHandleProcess: false,
      total: 0,
      loading: false,
      list: [],
      timeValue: "",
      activityOptions: [],
      queryParams: {
       
        params: { pageNum: 1, pageSize: 10 , startTime: "",
          endTime: "",},
        activityClassification:null,
        activityName:""
      },
      form: {
        activityCode: "",
        activityName: "",
        declarationDescribe: "",
        activityClassification: "",
        activeJoinTime:null
      },
      rules: {
        declarationDescribe: [
          { required: true, message: "请输入申报描述", trigger: "blur" },
        ],
        fileList: [{ required: true, validator: checkFile, trigger: "blur" }],
        activeJoinTime: [{ required: true, message: "请选择参加活动具体时间",  trigger: "blur" }],
      },
    };
  },
  async created() {
    await this.listDataFn();
    await this.getList();
  },
  computed: {
    activityClassName() {
      return (activityClassification) => {
        return this.getActivityClassName(activityClassification);
      };
    },
  },
    watch: {
    timeValue(e) {
      this.queryParams.params.startTime = e[0];
      this.queryParams.params.endTime = e[1];
    },
  },
  methods: {
    handleSearch() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },
    resetQuery(){
      this.queryParams = {
        
        params: { pageNum: 1, pageSize: 10,startTime: "",
          endTime: "", },
        activityClassification:null,
        activityName:""
      }
      this.timeValue = "";
      this.getList();
    },
    handleClose() {
      this.$refs.child.restList();
      this.form = {
        activityCode: "",
        activityName: "",
        declarationDescribe: "",
        activityClassification: "",
        activeJoinTime: null,
      };
      this.dialogHandleProcess = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          integralApplyApi(this.form).then((res) => {
            this.$modal.msgSuccess("申报成功");
            this.handleClose();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return "";
      }
    },
    fileList(list) {
      let fileNames = list
        .map((item) => this.getFileName(item.name))
        .toString();
      let filePath = list.map((item) => item.url).toString();
      this.$set(this.form, "fileNames", fileNames);
      this.$set(this.form, "filePath", filePath);
    },
    getActivityClassName(val) {
      let dictLabel = "";
      if (this.activityOptions.length == 0) return dictLabel;
      this.activityOptions.forEach((item) => {
        if (item.dictValue == val) {
          dictLabel = item.dictLabel;
        }
      });
      return dictLabel;
    },
    handleProcess(e) {
      this.$set(this.form, "activityName", e.activityName);
      this.$set(this.form, "activityCode", e.activityCode);
      this.$set(this.form, "declarationDescribe", "");
      this.$set(this.form, "activeJoinTime", "");
      this.$set(
        this.form,
        "activityClassification",
        this.getActivityClassName(e.activityClassification)
      );
      this.dialogHandleProcess = true;
    },
    getList() {
      this.loading = true;
      getActivityApi(this.queryParams)
        .then((response) => {
          this.total = response.total;
          this.list = response.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //获取活动分类
    listDataFn() {
      listData({
        dictType: "activity_classification",
      }).then((res) => {
        this.activityOptions = res.rows;
      });
    },
  },
};
</script>